import React, { useEffect,memo,useState } from 'react'
import DetailHeader from '@/components/detail/detailHeader/DetailHeader'
import DetailFooter from '@/components/detail/detailFooter/DetailFooter'
import DetailRotation from '@/components/detail/detailRotation/DetailRotation'
import DetailPopup from '@/components/detail/buyPopup/BuyPopup'
import  * as actionTypes from './store/actionCreators'
import Toast from '@/baseUI/Toast'
import { connect, useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import {Info} from './style'
import { setShoppingCartCount } from '../shoppingCart/store/actionCreators'

function Detail(props) {
    const {detailData}=props
    const {setTabbarDisplay,getDetailData}=props
    const [popupDisplay,setPopupDisplay]=useState(false)
    const [formData,setFormData] = useState({count:1})
    const shoppingCartCount=useSelector((state=>state.shoppingCart.shoppingCartCount))
    const dispatch=useDispatch()
    const {id}=useParams()
    // console.log(detailData)

    useEffect(()=>{
        getDetailData(id)
    },[])

    const changeFormData=(e)=>{
        setFormData({
            ...formData,
            [e.target.name]:e.target.value
        })
        console.log(formData)
    }

    const saveData=()=>{
        const newData={
                id:detailData.id,
                name:detailData.title,
                discountname:detailData.discountname,
                discountstate:detailData.discountstate,
                imgSrc:detailData.imgList[0],
                price:detailData.price,
                isdiscount:detailData.isdiscount,
                notdiscountPrice:detailData.notdiscountPrice,
                goodsAttribute:detailData.goodsAttribute,
                goodsAttributeChecked:formData,
                checked:false
            }
        if(localStorage.getItem('shoppingCartList')){
            localStorage.setItem('shoppingCartList',JSON.stringify([
                ...JSON.parse(localStorage.getItem('shoppingCartList')),
                newData
            ]))
        }
        else{
            localStorage.setItem('shoppingCartList',JSON.stringify([
                newData
            ]))
        }
        
    }

    const addToCart=()=>{
        // 如果参数未选齐全，且已经弹出，提醒选择参数，否则弹出（最终版）
        // if(Object.keys(formData).length<=Object.keys(detailData.goodsAttribute).length){
        //     if(popupDisplay){
        if(!popupDisplay){
            setPopupDisplay(true)
        }
        else{
            // 实验版，未弹出则先弹出，弹出后判断参数是否齐全
            if(Object.keys(formData).length<=Object.keys(detailData.goodsAttribute).length){
                Toast('请选择参数')
                return 
            }
            Toast('加入成功')
            setPopupDisplay(false)
            saveData()
            dispatch(setShoppingCartCount(shoppingCartCount+1))
        }
    }
    
    const buyNow=()=>{
        if(Object.keys(formData).length<=Object.keys(detailData.goodsAttribute).length){
            if(popupDisplay){
                Toast('请选择参数')
                return 
            }
            setPopupDisplay(true)
        }
        else{
            Toast('购买成功')
            setPopupDisplay(false)
            // reqBuy()
            // gotoOrder()
        }
    }

    useEffect(()=>{
        setTabbarDisplay(false)
        return ()=>{
            setTabbarDisplay(true)
        }
    },[])
    return (
        <div>
            <DetailHeader />
            <DetailRotation rotationImg={detailData.imgList || []} />
            <DetailPopup changeFormData={changeFormData} goodsAttribute={detailData.goodsAttribute || []} popupDisplay={popupDisplay} setPopupDisplay={setPopupDisplay}  />
            <Info>
                {
                    detailData.isdiscount?
                    <div className="discount">
                        特价
                        <div className="price">
                            <span>￥</span>{detailData.price}
                            <del>￥{detailData.notdiscountPrice}</del>
                        </div>
                    </div>:
                    <div className="notdiscount"><span>￥</span> {detailData.notdiscountPrice}</div>
                }
                <div className="goodsname">
                    <div className='title'>{detailData.title}</div>
                    <div className='container'>
                        <div>{detailData.PraisePersent}%</div>
                        <div className='text'>好评率</div>
                    </div>
                </div>
                <div className="storename"><span>自营</span>{detailData.store}</div>
                <div className="recommand">
                    <div>推荐理由</div>
                    <ol className="list">
                        {
                            detailData.recommandList&&detailData.recommandList.map((item,index)=>{
                                return (
                                    <li key={index+'recommand'}><span>{index+1}</span> {item}</li>
                                )
                            })
                        }
                    </ol>
                </div>
                <div className="postage"><span>邮费:</span>满{detailData.Postage}包邮</div>
                <div className="norms"><span>选择:</span>请选择规格和数量</div>
                <div className="place"><span>配送:</span><input type="text" placeholder='请选择配送地址' /></div>
                <div className="server">
                    <div><span>服务:</span></div>
                    <ul>
                        {
                            detailData.server&&detailData.server.map((item,index)=>{
                                return (
                                    <li key={index+'server'}>{item}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="evaluate">
                    <div className='title'>
                         <div>用户评价</div> 
                         <div>{detailData.PraisePersent}%好评率</div>
                    </div>
                    <div className='list'>
                        <div className='name'>
                            <img src="" alt="" />
                            <div>用户xxx</div>
                        </div>
                        <div className='time'>2021-10-27 17:00:18 白色</div>
                        <div>很棒的东西，值得购买</div>
                    </div>
                </div>
                <div className="detailimg">
                    {
                        detailData.detailImg&&detailData.detailImg.map((item,index)=>{
                            return <img src={item} alt="" key={index+'detailimg'} />
                        })
                    }
                </div>
            </Info>
            <DetailFooter setPopupDisplay={setPopupDisplay} addToCart={addToCart} buyNow={buyNow} />
        </div>
    )
}

const mapStateToPorps=(state)=>{
    return {
        detailData:state.detail.detailData
    }
}

const mapStateToDispatch=(dispatch)=>{
    return {
        setTabbarDisplay(display){
            dispatch(actionTypes.setTabbarDisplay(display))
        },
        getDetailData(id){
            dispatch(actionTypes.getDetailData(id))
        }
    }
}

export default connect(mapStateToPorps,mapStateToDispatch)(memo(Detail))
